<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<title>GT pro钱包</title>
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
		<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.min.css">
		<link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
		<link rel="stylesheet" href="bower_components/Ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css">
		<link rel="stylesheet" href="dist/css/AdminLTE.min.css">
		<link rel="stylesheet" href="dist/css/skins/skin-blue.min.css">
		<link rel="stylesheet" href="css/style.css">
		<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic">
		<link rel="stylesheet" href="bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css">
		<link rel="stylesheet" href="bower_components/bootstrap-daterangepicker/daterangepicker.css">
		<style>
			.checkbox {
				display: inline-block;
				margin-right: 20px;
			}
			
			.tableSort {
				cursor: pointer;
			}
			
			.tableSort span {
				display: inline-block;
				margin-left: 10px;
				width: 14px;
			}
			.coinSum{
				padding:15px 0;
				font-size:15px;
			}

		</style>
	</head>

	<body class="hold-transition skin-blue sidebar-mini">
		<div class="wrapper">
			<div class="content-wrapper">
				<section class="content-header">
					<ol class="breadcrumb">
						<li>
							<a href="#"><i class="fa fa-dashboard"></i>游戏用户</a>
						</li>
						<li class="active">资产列表</li>
					</ol>
				</section>
				<section class="content">
					<div class="box">
						<div class="box-header with-border">
							资产列表
						</div>
						<div class="box-body">
							<div class="buyu_search_group">
								<div class="row">
									<div class="col-xs-12 margin" id="coin_list"></div>
									<div class="col-xs-12 col-sm-6 col-lg-3">
										<div class="input-group margin">
											<div class="input-group-btn">
												<button type="button" class="btn btn-default" aria-expanded="false">用户id</button>
											</div>
											<input type="text" class="form-control" id="user_id" >
										</div>
									</div>
									<div class="col-xs-12 col-sm-6 col-lg-3">
										<button type="button" class="btn bg-primary margin" onclick="search()"><i class="fa fa-search" ></i>&nbsp;搜索</button>
										<button type="button" class="btn bg-primary margin" onclick="reset()"><i class="fa fa-trash" ></i>&nbsp;重置</button>
									</div>
								</div>
							</div>
						</div>
						<div class="row">
							<div class="col-xs-12">
								<!-- /.box-header -->
								<div class="box-body">
									<table id="example" class="display nowrap table table-bordered table-striped" style="width:100%;">
										<thead>
											<tr>
												<th>ID</th>
											</tr>
										</thead>
										<tbody></tbody>
									</table>
									<div class="coinSum clearfix" ></div>
								</div>
							</div>
						</div>
					</div>
				</section>
			</div>
		</div>
		<script src="bower_components/jquery/dist/jquery.min.js"></script>
		<script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
		<script src="bower_components/datatables.net/js/jquery.dataTables.min.js"></script>
		<script src="bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>

		<script src="bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js"></script>
		<script src="bower_components/moment/min/moment.min.js"></script>
		<script src="bower_components/bootstrap-daterangepicker/daterangepicker.js"></script>

		<script src="dist/js/adminlte.min.js"></script>
		<script src="js/argument.js"></script>
		<script src="js/fun.js"></script>
		<script src="js/nav.js"></script>
		<script src="js/pop.js"></script>
		<script src="js/getList.js"></script>
		<!--<script src="js/hsjManagement_fun.js"></script>-->

		<script type="text/javascript">
			var table,tablePage;
			
			//sort ""为非排序币种，1，2为排序币种，0为升序，1为降序
			//id 为排序币种_id
			function thRender(id,sort){
				$(".tableSort").remove()
				$.each($('#coin_list [name=coin_id]:checked'),function(index,item){
					var coin_id = $(item).attr('coin_id'),coin_name = $(item).attr('coin_name');
					$("#example thead tr").append('<th class="tableSort" coin_id="'+coin_id+'" sort="">'+coin_name+'<span></span></th>')
				})
				icon = (sort == 0)?('<i class="fa fa-sort-amount-asc"></i>'):('<i class="fa fa-sort-amount-desc"></i>')
				if($("#example thead tr th[coin_id="+id+"]").length){
					
					$("#example thead tr th[coin_id="+id+"]").addClass('active').attr('sort',sort).find('span').append(icon)	
				}else{
					var coin_id = $('#coin_list [name=coin_id]:checked').eq(0).attr("coin_id");
					$("#example thead tr th[coin_id="+coin_id+"]").addClass('active').attr('sort',sort).find('span').append(icon)	
				}
				
			}
			
			function tableRander() {
				console.log(table);
				
				var columns = [{
					data: 'user_id'
				}];
				
				$.each($('#coin_list [name = coin_id]:checked'),function(index,item){
					columns.push({data:$(item).attr('coin_name')})
				})
				console.log(columns.length)
				table = $('#example').DataTable({
					'ordering': false,
					'lengthChange': false,
					'searching': false,
					'info': true,
					"processing": true,
					"serverSide": true,
					"ajax": {
						"type": 'post',
						"url": url + "Back_UserCoinListBySort",
						'contentType': "application/x-www-form-urlencoded",
						"headers": {
							"auth-token": localStorage.getItem("wallet_token")
						},
						"data": function(d) {
							var data = {},json = {};
							tablePage = d.start / 10 + 1;
							var $active = $(".tableSort.active")
							var sort_type = $active.attr('sort'),
								sort_coin_id = $active.attr('coin_id');
							json = {
								sort_type: sort_type,
								sort_coin_id: sort_coin_id,
								page_num: d.start / 10 + 1
							};
							if($('#user_id').val()){
								json.user_id = $('#user_id').val()
							}
							data.data = JSON.stringify(json);
							return data;
						},
						"dataFilter": function(data) {
							var datajson = eval('(' + data + ')');
							if(datajson.status == 1000||datajson.status == 102) {
								ToLogin(datajson)
								return false;
							} else if(datajson.status != 1) {
								alert(datajson.error);
								return false;
							}
							var json = {};
							if(datajson.data == null) {
								json.recordsTotal = 0;
								json.recordsFiltered = 0;
								json.data = [];
								return JSON.stringify(json);
							} else {
								if(tablePage == 1){
									$('.coinSum').html('');
									$.each($('#coin_list [name=coin_id]:checked'),function(index,item){
										var coin_name = $(item).attr('coin_name');
										
										//datajson.data.coin_statistics
										$('.coinSum').append('<div style="float:left;padding-right:20px;"><small class="label label-danger"><i class="fa fa-fw fa-database"></i>'+coin_name+'</small> ：<span>'+datajson.data.coin_statistics[coin_name]+'</span> </div>')
									})
								}
								json.recordsTotal = datajson.data.total;
								json.recordsFiltered = datajson.data.total;
								var data = [];
								$.each(datajson.data.data_list, function(index, item) {
									var list = item.user_info
									$.each(item.coin_info, function(index, items) {
										list[items.coin_name] = items.balance_show
									})
									data.push(list);
								})
								json.data = data;
								return JSON.stringify(json);
							}
						}
					},
					"columns": columns
				})
			}

			
			$.ajax({
				type: 'post',
				url: url + "Back_MainChainForCoin",
				contentType: "application/x-www-form-urlencoded",
				headers: {
					"auth-token": localStorage.getItem("wallet_token")
				},
				data: {
					data: JSON.stringify({
						page_num: 1
					})
				},
				dataType: 'json',
				success: function(res) {
					console.log(res);
					if(res.status == 1000||res.status == 102) {
						ToLogin(res)
						return false;
					} else if(res.status != 1) {
						alert(res.error);
						return false;
					}
					var id;
					$.each(res.data, function(index, item) {
						(index == 0)?id= item.id:(null)
						$("#coin_list").append('<div class="checkbox"><label><input type="checkbox" name="coin_id" coin_id="'+item.id+'" coin_name="'+item.name+'" checked/>' + item.name + '</label></div>');
					})
					thRender(id,0)
					tableRander();
				}
			})

			$("#example").on('click', '.tableSort', function() {
				console.log($(this).attr('sort'))
				if($(this).attr('sort') == "") {
					$(this).addClass('active').attr('sort', '1').find('span').html('<i class="fa fa-sort-amount-desc"></i>');
					$(this).siblings('.tableSort').removeClass('active').attr('sort', '').find('span').html('');
				} else if($(this).attr('sort') == 1) {
					$(this).attr('sort', '0').find('span').html('<i class="fa fa-sort-amount-asc"></i>');
				} else {
					$(this).attr('sort', '1').find('span').html('<i class="fa fa-sort-amount-desc"></i>');
				}
				table.draw(false);
			})

			$("#coin_list").on('change', 'input[type=checkbox]', function() {
				if(table){
					table.clear();
					table.destroy();
				}
				var id = $(".tableSort.active").attr('coin_id'),//$(this).attr('coin_id');
					sort = $(".tableSort.active").attr('sort')
				thRender(id,sort);
				tableRander();
			})
		</script>
	</body>

</html>